<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css" />
    <title>气泡图</title>
    <style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
    	#map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="../build/l7.js"></script>
 <style>
	#map { position:absolute; top:0; bottom:0; width:100%; }
 </style>
<script>
  var scene = new L7.Scene({
    id: 'map',
    mapStyle: 'dark', // 样式URL
    center: [120.19382669582967, 30.258134],
    pitch: 0,
    minZoom:5,
    maxZoom:15,
    zoom: 12
  });
  window.scene = scene;

  scene.on('loaded', function() {
      scene.image.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
      $.get('https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json', data => {
        const imageLayer = scene.PointLayer({
          zIndex: 2
        })
        .source(data)
        .shape('local')
        .size(20) 
        .active(true)
        .color('w', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
        .render();
        console.log(imageLayer)
        imageLayer.on('click',(e)=>{
          console.log(e)
        })
      
        });
        
  
  });
</script>
</body>
</html>
